﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JeasyuiCRUD.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Script/themes/default/easyui.css" rel="stylesheet" />
    <link href="Script/themes/icon.css" rel="stylesheet" />
    <link href="Script/themes/color.css" rel="stylesheet" />
    <script src="Script/jquery-1.8.0.min.js"></script>
    <script src="Script/jquery.easyui.min.js"></script>
</head>
<body>
    <label>test demo</label>
    <form id="form1" runat="server">
        <center>
        <div id="pnlCRUD" title="CRUD Easyui" class="easyui-panel" style="width: 500px; height: auto; padding-left: 15px;">
             <table>
            <tr>
                <td><label style="width:150px;">Name:</label></td>
                <td><input id="txtName" class="easyui-validatebox" /></td>
            </tr>
            <tr>
                <td><label style="width:150px;">Address:</label></td>
                <td><input id="txtAddress" class="easyui-validatebox" /></td>
            </tr>
            <tr>
                <td><label style="width:150px;">City:</label></td>
                <td><select id="cmbCity" class="easyui-combobox" >
                    <option value="Ahemedabad">Ahemedabad</option>
                    <option value="Baroda">Baroda</option>
                    <option value="Surat">Surat</option>
                    </select>
                </td>
            </tr>
                  <tr>
                <td><input hidden="hidden" id="txtPhone" class="easyui-validatebox" /></td>
            </tr>
                 <tr>
                <td><a href="javascript:void(0)" class="easyui-linkbutton" onclick="SaveCustomerInfo()">Save</a></td>
            </tr>
        </table>
            <input type="hidden" id="hdnID" />
              <br />
             <table id="dgCustomerInfo" style="width:475px;" autorowheight="true" pagination="true" data-options="toolbar:'#tb'" rownumbers="true" fitcolumns="true" singleselect="true" remotesort="true">
                <thead>
                    <tr>
                        <th  width="18" field="ID" hidden sortable="true"></th>
                        <th  width="18" field="Name" sortable="true">Name</th>
                        <th  width="18" field="Address" sortable="true">Address</th>
                        <th  width="18" field="City" sortable="true">City</th>
                    </tr>
                </thead>
            </table>

            <div id="tb" style="padding:5px;height:auto">
                <div style="margin-bottom:5px">
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="editCustomer()">Edit</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="deleteCustomer()">Delete</a>
                </div>
            </div>
            <br />
            </div>
            </center>
    </form>

    <script type="text/javascript">
        $(document).ready(function () {
            BindGrid();
        });

        function BindGrid() {
            $('#dgCustomerInfo').datagrid({
                url: "CustomerInfo.asmx/BindGrid",
            });
        }

        function editCustomer() {
            var row = $('#dgCustomerInfo').datagrid('getSelected');
            $('#txtName').val(row.Name);
            $('#txtAddress').val(row.Address);
            $('#cmbCity').combobox('setValue', row.City);
            $('#hdnID').val(row.ID);
        }

        function deleteCustomer() {
            var row = $('#dgCustomerInfo').datagrid('getSelected');
            if (row.ID != '') {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "Default.aspx/DeleteCustomerInfo",
                    data: "{ ID: '" + row.ID + "'}",
                    dataType: "json",
                    success: function (data) {
                        if (data.d > 0) {
                            $('#dgCustomerInfo').datagrid('reload');
                            alert('Customer Delete Successfully');
                            reset();
                        }
                    },
                    error: function (result) {
                        alert("Error");
                    }
                });
            }
        }

        function reset() {
            $('#txtName').val('');
            $('#txtAddress').val('');
            $('#cmbCity').combobox('setValue', 'Ahemedabad');
            $('#hdnID').val('');
        }

        function SaveCustomerInfo() {
            var name = $('#txtName').val();
            var address = $('#txtAddress').val();
            var city = $('#cmbCity').combobox('getValue');
            var phoneno = $('#txtPhone').val();

            if ($('#hdnID').val() == '') {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "Default.aspx/SaveCustomerInfo",
                    data: "{ name: '" + name + "', address: '" + address + "', city: '" + city + "', phoneno: '" + phoneno + "'}",
                    dataType: "json",
                    success: function (data) {
                        if (data.d > 0) {
                            $('#dgCustomerInfo').datagrid('reload');
                            alert('Customer Save Successfully');
                            reset();
                        }
                    },
                    error: function (result) {
                        alert("Error");
                    }
                });
            }
            else {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "Default.aspx/UpdateCustomerInfo",
                    data: "{  ID: '" + $('#hdnID').val() + "',name: '" + name + "', address: '" + address + "', city: '" + city + "', phoneno: '" + phoneno + "'}",
                    dataType: "json",
                    success: function (data) {
                        if (data.d > 0) {
                            $('#dgCustomerInfo').datagrid('reload');
                            alert('Customer Save Successfully');
                            reset();
                        }
                    },
                    error: function (result) {
                        alert("Error");
                    }
                });
            }

        }
    </script>
</body>
</html>
